<script setup>
import { ref, onMounted, reactive } from 'vue';
import { useCategoryStore } from '@/stores/category.js'
import Editor from '@/components/new-components/Editor.vue'
import { Product } from '@/api'
import StoreUpload from '@/components/new-components/Upload.vue'
import { useRouter } from 'vue-router';
let router = useRouter()
let category = useCategoryStore()
let handleSet = (value) => {
    console.log(value);
}
// 初始化
let cate_tree = ref([])
onMounted(() => {
    // 加载分类
    category.load_select_cate()
    load_rules()
    cate_tree.value = category.load_select_cates
    // 加载运费模板
    load_temp()
})
// 加载规格
let rules_list = ref([])
let load_rules = async () => {
    let { status, data } = await Product.product_rule({ rule_name: '', page: 1, limit: 15 })
    if (status) {
        rules_list.value = data.list
    }
}
// 点击tab栏
let activeName = ref('one')
let handleTabPane = (value) => {
    activeName.value = value.props.name;
    two_form.attrs[0].pic = one_form.slider_image
}
// 添加
// 基础信息
let one_form = reactive({
    type: 0,
    store_name: '',
    unit_name: '',
    slider_image: '',
    video_open: 'false',
    is_show: 1,
    cate_id: [],
    video_link: '',
    seletVideo: 1
})
let handleOneform = () => {
    activeName.value = 'two'
    two_form.attrs[0].pic = one_form.slider_image
}
// 规格库存和商品详情
let two_form = reactive({
    spec_type: 0,
    image: '',
    attrs: [{ price: 0, cost: 0, ot_price: 0, stock: 0, weight: 0, volume: 0, pic: '' }],
    bar_code: '',
    description: ''
})
// 物流设置
let three_form = reactive({
    logistics: ['1'],
    freight: 2,
    postage: 0,
    temp_id: ''
})
// 加载运费模板
let temp_list = ref([])
let load_temp = async () => {
    let { data, status } = await Product.get_template()
    if (status) {
        temp_list.value = data
    }
}
//营销设置
let form_hide = ref(false)
let four_form = reactive({
    ficti: 0,
    sort: 0,
    give_integral: 0,
    label_id: [],
    coupon_ids: '',
    is_hot: '',
    //限购日期
    presale_day: '',
    //商品推荐
    recommend: [],
    vip_product: false,
    // 是否预售
    presale: false,
    //预售活动时间
    presale_time:[],
    // 限购数量
    limit_num: '',
    //是否限购
    is_limit: false,
    //限制类型
    limit_type: '',
    // 活动优先级
    activity: '',
    // 单独设置
    is_sub: [],
    // 自定义留言
    custom: false,
    custom_form: [{ title: '', label: '', status: false, value: '' }]
})
// 添加优惠券
let mark_list = ref("")
let markVisible = ref(false)
let handleGiveSale = async () => {
    let { status, data } = await Product.mark({ receive_type: 3, page: 1, limit: 10 })
    if (status) {
        mark_list.value = data.list
        markVisible.value = true
    }
}
// 其他设置
let last_form = reactive({
    keyword: '',
    store_info: '',
    recommend_image: '',
    command_word: '',
    // custom_form自定义留言，label是选择下拉框，status是不是必填，title就是输入的内容
    custom_form: [
        { label: '', status: false, title: '', value: '' }
    ]
})
// 控制是否添加视频
let handleSwitchVidio = () => {

}
//营销设置下的选择优品推荐
// 点击商品获取所有商品，然后选择商品，上传该头像
let innerStoreVisible = ref(false)
let handleOpenStore = () => {
    load_select_cate()
    load_product_list()
    innerStoreVisible.value = true
}
// 获取所有分类
// 加载下拉框分类列表
let load_select_cates = ref([])
let load_select_cate = async () => {
    let { status, data } = await Product.category_tree(1)
    if (status) {
        load_select_cates.value = data
    }
}
// 加载商品列表
let store_form = ref([])
let pro_total = ref(0)
let load_product_list = async () => {
    let { msg, data, status } = await Product.product_list({ page: 1, limit: 15, cate_id: '', is_new: '', store_name: '' })
    if (status) {
        store_form.value = data.list
        pro_total.value = data.count
    }
}
// 点击多选框获取头像并渲染
let store_img = ref("")
let id = ref('')
let handleSelectionChange = (img) => {
    store_img.value = img[0].image
    id.value = img[0].id
    innerStoreVisible.value = false
}
//添加商品
let handleAddProduct = async () => {
    let { status, data, msg } = await Product.save_product(0, { ...one_form, ...two_form, ...three_form, ...four_form, ...last_form })
    if (status == 200) {
        ElMessage.success(msg)
        router.push('/product/list')
    } else {
        ElMessage.error(msg)
    }
}

</script>

<template>
    <el-page-header icon="ArrowLeft" @click="$router.back()">
        <template #content>
            <span class="text-large font-600 mr-3"> 添加商品 </span>
        </template>
    </el-page-header>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleTabPane" style="background-color: #fff;">
        <el-tab-pane label="基础信息" name="one">
            <el-form label-width="120px" :model="one_form">
                <el-form-item label="商品类型：">
                    <el-radio-group class="store_type" v-model="one_form.type">
                        <span> <el-radio :label="0" border>
                                <h3>普通商品</h3>
                                <p style="font-size: 12px;">(物流发货)</p>
                            </el-radio></span>
                        <span> <el-radio :label="1" border>
                                <h3>卡密/网盘</h3>
                                <p style="font-size: 12px;">(自动发货)</p>
                            </el-radio></span>
                        <span> <el-radio :label="2" border>
                                <h3>优惠券</h3>
                                <p style="font-size: 12px;">(自动发货)</p>
                            </el-radio></span>
                        <span> <el-radio :label="3" border>
                                <h3>虚拟商品</h3>
                                <p style="font-size: 12px;">(虚拟发货)</p>
                            </el-radio></span>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="商品分类：">
                    <el-select v-model="one_form.cate_id" clearable multiple class="m-2" placeholder="请选择商品分类">
                        <el-option v-for="item in cate_tree" :key="item.id" :label="`${item.html}${item.cate_name}`"
                            :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="商品名称：">
                    <el-input v-model="one_form.store_name" style="width: 218px;" placeholder="请输入商品名称" clearable />
                </el-form-item>
                <el-form-item label="单位：">
                    <el-input v-model="one_form.unit_name" style="width: 218px;" placeholder="请输入单位" clearable />
                </el-form-item>
                <el-form-item label="商品轮播图：">
                    <StoreUpload v-model="one_form.slider_image"></StoreUpload>
                </el-form-item>
                <el-form-item label="商品视频：">
                    <el-switch v-model="one_form.video_open" inline-prompt :active-value="true" :inactive-value="false"
                        active-text="显示" inactive-text="隐藏" @change="handleSwitchVidio" />
                </el-form-item>
                <el-form-item label="视频类型：" v-if="one_form.video_open == true">
                    <el-radio-group v-model="one_form.seletVideo" style="width: 100%;">
                        <el-radio :label="1">本地视频</el-radio>
                        <el-radio :label="2">视频链接</el-radio>
                    </el-radio-group>
                    <StoreUpload v-if="one_form.seletVideo == 1"></StoreUpload>
                    <p style="width: 100%; color: #ddd;">建议时长：9～30秒，视频宽高比16:9</p>
                    <el-input v-model="one_form.video_link" v-if="one_form.seletVideo == 2" style="width: 218px;"
                        placeholder="请输入视频链接" clearable />
                </el-form-item>
                <el-form-item label="商品状态：">
                    <el-radio-group v-model="one_form.is_show">
                        <el-radio :label="1">上架</el-radio>
                        <el-radio :label="0">下架</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleOneform">
                        下一步
                    </el-button>
                </el-form-item>
            </el-form>
        </el-tab-pane>
        <el-tab-pane label="规格库存" name="two">
            <el-form label-width="120px" style="width: 320px;" :model="two_form">
                <el-form-item label="商品规格：">
                    <el-radio-group v-model="two_form.spec_type">
                        <el-radio :label="0">单规格</el-radio>
                        <el-radio :label="1">多规格</el-radio>
                    </el-radio-group>
                </el-form-item>
                <div v-if="two_form.spec_type == 0">
                    <el-form-item label="图片：">
                        <StoreUpload v-model="two_form.attrs[0].pic"></StoreUpload>
                    </el-form-item>
                    <el-form-item label="售价：">
                        <el-input-number v-model="two_form.attrs[0].price" style="width: 320px;" class="mx-4" :min="0"
                            :max="99999999.00" controls-position="right" />
                    </el-form-item>
                    <el-form-item label="成本价：">
                        <el-input-number v-model="two_form.attrs[0].cost" style="width: 320px;" class="mx-4" :min="0"
                            :max="99999999.00" controls-position="right" />
                    </el-form-item>
                    <el-form-item label="原价：">
                        <el-input-number v-model="two_form.attrs[0].ot_price" style="width: 320px;" class="mx-4" :min="0"
                            :max="99999999.00" controls-position="right" />
                    </el-form-item>
                    <el-form-item label="库存：">
                        <el-input-number v-model="two_form.attrs[0].stock" style="width: 320px;" class="mx-4" :min="0"
                            :max="99999999" controls-position="right" />
                    </el-form-item>
                    <el-form-item label="商品编号：">
                        <el-input v-model="two_form.bar_code" clearable />
                    </el-form-item>
                    <el-form-item label="重量(KG)：">
                        <el-input-number v-model="two_form.attrs[0].weight" style="width: 320px;" class="mx-4" :min="0"
                            :max="99999999" controls-position="right" />
                    </el-form-item>
                    <el-form-item label="体积(m³)：">
                        <el-input-number v-model="two_form.attrs[0].volume" style="width: 320px;" class="mx-4" :min="0"
                            :max="99999999" controls-position="right" />
                    </el-form-item>
                </div>
                <div v-else>
                    <div class="add_rules">
                        <el-form-item label="选择规格：">
                            <el-input v-model="two_form.rule_name" placeholder="请输入标题名称" style="width: 200px;" />
                        </el-form-item>
                        <el-button type="primary" @click="add_show = true" v-show="!add_show">
                            确认
                        </el-button>
                        <el-button plain icon="Plus" @click="add_show = true" v-show="!add_show">
                            添加规格模板
                        </el-button>
                    </div>
                    <div class="load_new_rules">
                        <el-button type="primary" icon="Plus" @click="add_show = true" v-show="!add_show">
                            添加新规格
                        </el-button>
                        <el-button type="success" @click="add_show = true" v-show="!add_show">
                            立即生成
                        </el-button>
                    </div>
                    <div v-show="add_show" class="add_new_rule">
                        <el-form-item label="规格名称">
                            <el-input v-model="two_form" autocomplete="off" />
                        </el-form-item>
                        <el-form-item label="规格值">
                            <el-input v-model="two_form" autocomplete="off" />
                        </el-form-item>
                        <el-button type="primary" @click="handlePushTag" style="margin-left: 20px;">
                            确定
                        </el-button>
                        <el-button plain @click="add_show = false">
                            取消
                        </el-button>
                    </div>
                </div>
                <el-form-item>
                    <el-button @click="activeName = 'one'">
                        上一步
                    </el-button>
                    <el-button type="primary" @click="activeName = 'three'">
                        下一步
                    </el-button>
                </el-form-item>
            </el-form>
        </el-tab-pane>
        <el-tab-pane label="商品详情" name="three">
            <div class="editor">
                <span>商品详情:</span>
                <Editor v-model="two_form.description" style="margin-bottom: 20px; width: 60%;"></Editor>
                <div class="phone_content">
                    <h3>详情预览</h3>
                </div>
            </div>
            <div style="margin-left: 100px;">
                <el-button @click="activeName = 'two'">
                    上一步
                </el-button>
                <el-button type="primary" @click="activeName = 'four'">
                    下一步
                </el-button>
            </div>
        </el-tab-pane>
        <el-tab-pane label="物流设置" name="four">
            <el-form :model="three_form" label-width="120px">
                <el-form-item label="物流方式：">
                    <el-checkbox-group v-model="three_form.logistics">
                        <el-checkbox label="1">
                            快递
                        </el-checkbox>
                        <el-checkbox label="2">
                            到店核销
                        </el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="运费设置：">
                    <el-radio-group v-model="three_form.freight">
                        <el-radio :label="2">固定运费</el-radio>
                        <el-radio :label="3">运费模板</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item v-if="three_form.freight == 2">
                    <el-input v-model="three_form.postage" style="width: 300px;" />
                </el-form-item>
                <el-form-item v-if="three_form.freight == 3">
                    <el-select v-model="three_form.temp_id" clearable class="m-2" placeholder="请选择运费模板">
                        <el-option v-for="item in temp_list" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button @click="activeName = 'three'">
                        上一步
                    </el-button>
                    <el-button type="primary" @click="activeName = 'five'">
                        下一步
                    </el-button>
                </el-form-item>
            </el-form>
        </el-tab-pane>
        <el-tab-pane label="营销设置" name="five">
            <el-form :model="four_form" label-width="140px">
                <el-form-item label="已售数量:">
                    <el-input-number v-model="four_form.ficti" class="mx-4" :min="0" :max="99999999.00"
                        controls-position="right" />
                </el-form-item>
                <el-form-item label="排序：">
                    <el-input-number v-model="four_form.sort" class="mx-4" :min="0" :max="99999999.00"
                        controls-position="right" />
                </el-form-item>
                <div class="border_number"></div>
                <el-form-item label="购买送积分：">
                    <el-input-number v-model="four_form.give_integral" class="mx-4 " :min="0" :max="99999999.00"
                        controls-position="right" />
                </el-form-item>
                <el-form-item label="购买送优惠券：">
                    <el-button type="primary" @click="handleGiveSale">添加优惠券</el-button>
                </el-form-item>
                <el-form-item label="关联用户标签：">
                    <el-input v-model="four_form.label_id" style="width: 220px;" placeholder="选择用户标签" clearable />
                </el-form-item>
                <div class="border_number"></div>
                <el-form-item label="付费会员专属：">
                    <el-switch v-model="four_form.vip_product" inline-prompt :active-value="1" :inactive-value="0"
                        active-text="开启" inactive-text="关闭" />
                    <p class="vedio_text">开启后仅付费会员可以看见并购买此商品</p>
                </el-form-item>
                <el-form-item label="单独设置：">
                    <el-checkbox-group v-model="four_form.is_sub" @change="handleSet">
                        <el-checkbox :label="1">
                            佣金设置（数字即返佣金额）
                        </el-checkbox>
                        <el-checkbox :label="0">
                            付费会员价
                        </el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="商品属性：" v-if="four_form.is_sub==1">
                    <el-table :data="two_form.attrs" border style="width: 100%">
                        <el-table-column label="图片"  width="180" />
                        <el-table-column label="售价" width="180" />
                        <el-table-column label="成本价" />
                        <el-table-column label="原价" />
                        <el-table-column label="一级返佣" v-if="four_form.is_sub == 1" />
                        <el-table-column label="二级返佣" v-if="four_form.is_sub == 1" />
                        <el-table-column label="会员价" />
                    </el-table>
                </el-form-item>
                <!-- <el-form-item label="商品属性：" v-if="four_form.is_sub==0">
                    <el-table :data="two_form.attrs" border style="width: 100%">
                        <el-table-column label="图片" prop="two_form.attrs[0]." width="180" />
                        <el-table-column label="售价" width="180" />
                        <el-table-column label="成本价" />
                        <el-table-column label="原价" />
                        <el-table-column label="一级返佣" v-if="four_form.is_sub == 1" />
                        <el-table-column label="二级返佣" v-if="four_form.is_sub == 1" />
                        <el-table-column label="会员价" />
                    </el-table>
                </el-form-item> -->
                <div class="border_number"></div>
                <el-form-item label="是否限购：">
                    <el-switch v-model="four_form.is_limit" inline-prompt :active-value="true" :inactive-value="false"
                        active-text="开启" inactive-text="关闭" />
                </el-form-item>
                <div style="width: 100%;" v-if="four_form.is_limit == true">
                    <el-form-item label="运费设置：">
                        <el-radio-group v-model="three_form.freight">
                            <el-radio :label="0">单次限购</el-radio>
                            <el-radio :label="1">永久限购</el-radio>
                        </el-radio-group>
                        <p style="color: #ddd;width:100%">单次限购是限制每次下单最多购买的数量，永久限购是限制一个用户总共可以购买的数量</p>
                    </el-form-item>
                    <el-form-item label="限购数量：">
                        <el-input-number v-model="four_form.limit_num" class="mx-4" :min="0" :max="99999999.00"
                            controls-position="right" />
                    </el-form-item>
                </div>
                <el-form-item label="预售商品：">
                    <el-switch v-model="four_form.presale" inline-prompt :active-value="true" :inactive-value="false"
                        active-text="开启" inactive-text="关闭" />
                </el-form-item>
                <div v-if="four_form.presale == true">
                    <el-form-item label="预售活动时间：" style="width:400px;">
                        <el-date-picker type="daterange" v-model="four_form.presale_time" start-placeholder="活动开始时间" end-placeholder="活动结束时间" />
                    </el-form-item>
                    <p class="active_time">设置活动开启结束时间，用户可以在设置时间内发起参与预售</p>
                    <el-form-item label="发货时间：">
                        <span style="font-size:14px; margin-right:10px;">预售活动结束后</span>
                        <el-input-number v-model="four_form.presale_day" class="mx-4" :min="0" :max="99999999.00"
                            controls-position="right" />
                        <span style="font-size:14px; margin-left:10px;">天之内</span>
                    </el-form-item>
                </div>
                <el-form-item label="商品推荐：">
                    <el-checkbox-group v-model="four_form.recommend">
                        <el-checkbox label="热卖单品" name="type" />
                        <el-checkbox label="促销单品" name="type" />
                        <el-checkbox label="精品推荐" name="type" />
                        <el-checkbox label="首发新品" name="type" />
                        <el-checkbox label="优品推荐" name="type" />
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="活动优先级：" v-model="four_form.activity">
                    <div class="power">
                        <el-tag class="ml-2" type="danger">默认</el-tag>
                        <el-tag>秒杀</el-tag>
                        <el-tag class="ml-2" type="warning">拼团</el-tag>
                        <el-tag class="ml-2" type="success">砍价</el-tag>
                        <p class="vedio_text">可拖动按钮调整活动的优先展示顺序</p>
                    </div>
                </el-form-item>
                <el-form-item label="选择优品推荐商品：" v-model="four_form" style="margin-top: 40px;">
                    <div class="avatar-content" @click="handleOpenStore">
                        <el-icon>
                            <Plus />
                        </el-icon>
                        <img :src="store_img" alt="" class="use-icon" v-if="store_img" style="width: 61px; height: 61px;">
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button @click="activeName = 'four'">
                        上一步
                    </el-button>
                    <el-button type="primary" @click="activeName = 'six'">
                        下一步
                    </el-button>
                </el-form-item>
            </el-form>
        </el-tab-pane>
        <el-tab-pane label="其他设置" name="six">
            <el-form label-width="100px" :model="last_form">
                <el-form-item label="商品关键字：">
                    <el-input v-model="last_form.keyword" style="width: 230px;" placeholder="请输入商品关键字" clearable />
                </el-form-item>
                <el-form-item label="商品简介：">
                    <el-input v-model="last_form.store_info" style="width: 230px;" :rows="2" type="textarea"
                        placeholder="请输入商品简介" />
                </el-form-item>
                <el-form-item label="商品口令：">
                    <el-input v-model="last_form.command_word" style="width: 230px;" :rows="2" type="textarea"
                        placeholder="请输入商品口令" />
                </el-form-item>
                <el-form-item label="商品推荐图：">
                    <StoreUpload v-model="last_form.recommend_image"></StoreUpload>
                </el-form-item>
                <el-form-item label="自定义留言：">
                    <el-switch v-model="last_form.custom" inline-prompt :active-value="true" :inactive-value="false"
                        active-text="开启" inactive-text="关闭" />
                    <div v-if="last_form.custom == true" style="width: 100%;">
                        <span style="color: blue; width: 100%;" @click="form_hide = true">+添加表单</span>
                        <div v-if="form_hide == true" class="add_msg">
                            <el-input v-model="last_form.custom_form[0].label" :rows="2" type="text" placeholder="请输入商品简介"
                                style="width: 200px;" />
                            <el-select style="margin-left: 20px;" v-model="three_form.temp_id" clearable class="m-2"
                                placeholder="请选择运费模板">
                                <el-option v-for="item in temp_list" :key="item.id" :label="item.name" :value="item.id" />
                            </el-select>
                            <el-checkbox label="必填" v-model="last_form.custom_form[0].status" style="margin-left: 20px;" />
                            <span style="margin-left: 20px; color: blue;">删除</span>
                        </div>
                        <p style="color: #ddd;">用户下单时需填写的信息，最多可设置10条</p>
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button plain @click="activeName = 'five'">
                        上一步
                    </el-button>
                    <el-button type="primary" @click="handleAddProduct">
                        保存
                    </el-button>
                </el-form-item>
            </el-form>
        </el-tab-pane>
    </el-tabs>
    <!-- 点击获取所有商品的信息 -->
    <el-dialog v-model="innerStoreVisible" width="60%" title="请选择商品" append-to-body>
        <el-form :inline="true" class="form-content">
            <el-form-item label="商品分类：" label-width="120px">
                <el-select v-model="load_select_cates.id" class="m-2" clearable placeholder="请选择用户分组" style="width: 100%;">
                    <el-option v-for="item in load_select_cates" :key="item.id" :label="`|-----${item.cate_name}`"
                        :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="用户名称">
                <div class="mt-4 flex_btn">
                    <el-input placeholder="请输入用户名称" v-model="search_account" class="input-with-select" />
                    <el-button type="primary" @click="handleSearch" icon="Search" style="margin-left: 20px;">
                        搜索
                    </el-button>
                </div>
            </el-form-item>
            <!-- 选择商品 -->
            <el-table :data="store_form" size="small" style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="50" />
                <el-table-column prop="id" label="商品ID" width="100" />
                <el-table-column prop="image" label="商品图" width="80">
                    <template #default="scope">
                        <img :src="scope.row.image" alt="" style="width: 36px; height: 36px;">
                    </template>
                </el-table-column>
                <el-table-column prop="store_name" label="商品名称" width="300" />
                <el-table-column prop="cate_name" label="商品分类" />
            </el-table>
        </el-form>
        <el-pagination class="el-pagination2" background :total="total" @current-change="handlePage"
            :page-size="pagesize" />
    </el-dialog>
    <!-- 添加优惠券 -->
    <el-dialog v-model="markVisible" width="60%" title="请选择商品" append-to-body>
        <el-table :data="mark_list" size="small" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50" />
            <el-table-column prop="id" label="ID" width="100" />
            <el-table-column prop="store_name" label="优惠券名称" width="300" />
            <el-table-column prop="cate_name" label="优惠券类型" />
            <el-table-column prop="cate_name" label="面值" />
            <el-table-column prop="cate_name" label="最低消费" />
            <el-table-column prop="cate_name" label="发布数量" />
            <el-table-column prop="cate_name" label="有效期限" />
            <el-table-column prop="cate_name" label="状态" />
        </el-table>
        <el-pagination class="el-pagination2" background :total="total" @current-change="handlePage"
            :page-size="pagesize" />
    </el-dialog>
</template>
<style scoped lang="less">
.el-page-header {
    background-color: #fff;
    padding: 10px 20px;
    margin-bottom: 20px;
    border-radius: 5px;
}

.active_time {
    width: 100%;
    margin-left: 140px;
    color: #ddd;
    font-size: 12px;
    margin-bottom: 20px;
}

.add_rules {
    display: flex;
}

.add_msg {
    display: flex;
}

.load_new_rules {
    display: flex;
    margin-left: 120px;
    margin-bottom: 20px;
}

.power .el-tag {
    margin-right: 10px;
    margin-bottom: 10px;
}

.editor {
    display: flex;
    flex-wrap: nowrap;

    span {
        font-size: 12px;
        margin: 0 20px 0 30px;
    }

    .phone_content {
        width: 304px;
        height: 560px;
        border-radius: 30px;
        margin-left: 1px;
        padding: 50px 20px 40px;
        border: 1px solid #ddd;

        h3 {
            text-align: center;
            font-size: 14px;
            margin-top: -30px;
        }
    }
}

.vedio_text {
    position: absolute;
    left: 0;
    bottom: -20px;
    font-size: 12px;
    color: #ddd;
}

.img_text {
    position: absolute;
    left: 0;
    bottom: -40px;
    font-size: 12px;
    color: #ddd;
}

.border_number {
    border: 1px dashed #ddd;
    margin-top: 30px;
    margin-bottom: 30px;
}

.store_type .el-radio {
    height: 70px;
    margin-right: 20px;
    text-align: center;
}

.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}

.avatar-content {
    width: 61px;
    height: 61px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: rgba(250, 250, 250);
    text-align: center;
    line-height: 60px;
    box-shadow: 2px 2px 5px 1px #ddd;
    cursor: pointer;
    font-size: 20px;

    .use-icon {
        position: absolute;
        left: 1px;
        top: 1px;
        background-color: #fff;
        border-radius: 5px;
    }
}

.flex_btn {
    display: flex;
}

.el-tabs {
    padding: 20px;
}
</style>
